<template>
<el-scrollbar  style="min-height:600px;">
  <div class="qualified">
    <div class="qualified_box">
      <div class="qualified_box1">
        <div class="qualified_box1_header ">
          <div class="clearfix">
            <h2 class="fl">审核资料</h2>
            <!-- <nuxt-link to="#" class="rotate_arrow fr">
              <img src="~/static/images/login/button_normal.png" alt="">
            </nuxt-link> -->
          </div>
          <ul style="margin-top:17px;">
            <li>以下资料提交审核通过之后，账号会立即生效</li>
          </ul>
        </div>
        <div class="qualified_box1_form">
          <div class="qualified_box1_left">
            <div class="qualified_box1_form_group">
              <label class="Login_form_label">供应商名称</label>
              <input
                type="text" placeholder="请输入"
                maxlength="100"
                v-validate="'required|max:100|min:1'"
                v-model="name" name="name" class="ml_125">
              <p class="qualified_box1_error"><span v-show="errors.has('name')">请输入供应商名称</span></p>
            </div>
            <div class="qualified_box1_form_group">
              <label class="Login_form_label">联系人姓名</label>
              <input type="text" maxlength="20"
              v-validate="'required|max:20|min:1'"
              v-model="contactName" name="contactName" placeholder="请输入" class="ml_125">
              <p class="qualified_box1_error"><span v-show="errors.has('contactName')">请输入联系人姓名</span></p>
            </div>
          </div>
          <div class="qualified_box1_right">
            <set-avatar
            v-validate="'required'"
            data-vv-value-path="photo"
            data-vv-name="photo"
            :is-error="errors.has('photo')"
            v-model="photo"/>
          </div>

          <p class="clearfix"></p>
          <div class="qualified_box1_form_group">
            <label class="Login_form_label">地址</label>
            <div class="select_address">
              <el-cascader
                size="large"
                :options="regionData"
                v-model="selectedOptions"
                v-validate="'required|selectedArea'"
                data-vv-value-path="selectedOptions"
                data-vv-name="selectedOptions"
                @change="city_Change" placeholder="请选择">
              </el-cascader>
            </div>
            <input type="text" v-model="address"
            v-validate="'required|max:100|min:1'"
            @blur="getLocation"
            name="address" maxlength="100" placeholder="详细地址">
            <p class="qualified_box1_error">
              <span v-show="errors.has('selectedOptions')">请选择省/市/区</span>
              <span v-show="!errors.has('selectedOptions')&&errors.has('address')">请输入详细地址</span>
            </p>
          </div>
        </div>
      </div>
      <div class="qualified_box2">
        <div class="qualified_box2_header line51 clearfix">
          <h2 class="fl">经营文件</h2>
          <!-- <nuxt-link to="#" class="fr more">添加更多</nuxt-link> -->
        </div>
        <div class="qualified_box2_upload">
          <div>
            <ecp-upload
            v-validate="'required'"
            data-vv-value-path="businessLicenceUrl"
            data-vv-name="businessLicenceUrl"
            :is-error="errors.has('businessLicenceUrl')"
            v-model="businessLicenceUrl" title='经营文件'/>
          </div>
          <div>
            <ecp-upload
            v-validate="'required'"
            data-vv-value-path="idCardFrontUrl"
            data-vv-name="idCardFrontUrl"
            :is-error="errors.has('idCardFrontUrl')"
            v-model="idCardFrontUrl" title='身份证正面'/>
          </div>
          <div>
            <ecp-upload
            v-validate="'required'"
            data-vv-value-path="idCardBackUrl"
            :is-error="errors.has('idCardBackUrl')"
            data-vv-name="idCardBackUrl" v-model="idCardBackUrl" title='身份证背面'/>
          </div>
        </div>
      </div>
      <div class="qualified_box3">
        <div class="qualified_box3_header">
          <div class="line51 clearfix">
            <h2 class="fl">添加证书</h2>
            <!-- <nuxt-link to="#" class="fr more">添加更多</nuxt-link> -->
          </div>
          <ul>
            <li>请尽量添加您的产品授权书，资质认证书等证书，有助于提高您的供应竞争力</li>
          </ul>
        </div>
        <div class="qualified_box3_fileUpload">
          <ecp-upload title='产品授权书'
            v-validate="'required'"
            data-vv-value-path="productAuthUrl"
            data-vv-name="productAuthUrl"
            :is-error="errors.has('productAuthUrl')"
            v-model="productAuthUrl"/>
          <ecp-upload
            title='请上传资质认证书等证书'
            v-model="otherUrls"
            v-validate="'required|selectedOthers'"
            data-vv-value-path="otherUrls"
            data-vv-name="otherUrls"
            :is-error="errors.has('otherUrls')"
            multiple/>
        </div>
        <ul>
          <li>请尽量添加您的产品授权书，资质认证书等证书，有助于提高您的供应竞争力</li>
        </ul>
      </div>
      <button class="Login_form_btn" @click="doSubmit">提交审核</button>
      <!-- <nuxt-link to="#" class="text-center save">保存</nuxt-link> -->
    </div>
  </div>
  </el-scrollbar>
</template>
<script>
  import setAvatar from '~/components/setAvatar'
  import ecpUpload from '~/components/ecpUpload'
  import { nologin } from "~/middleware/logincheck"
  import { updateSupplyShopInfo, getSupplyShopInfo } from '~/api/'
  import { geocode } from "~/api/mapapi"

  if (process.browser) {
    var {regionData, CodeToText} = require('element-china-area-data')
  }
  const selectedArea = {
    getMessage(field, args) {
      return '请选择省/市/区'
    },
    validate(value, args) {
      return new Promise(resolve => {
        resolve({
          valid: value.length === 3
        })
      })
    }
  }
  const selectedOthers = {
    getMessage(field, args) {
      return '请上传资质认证书等证书'
    },
    validate(value, args) {
      return new Promise(resolve => {
        resolve({
          valid: value.length !== 0
        })
      })
    }
  }
  export default {
    middleware: nologin,
    components:{setAvatar, ecpUpload},
    data() {
      return {
        regionData,
        selectedOptions: [],
        name: "",
        contactName: "",
        provinceCode: "",
        provinceName: "",
        cityCode: "",
        cityName: "",
        districtCode: "",
        districtName: "",
        longitude: "",
        latitude: "",
        address: "",
        businessLicenceUrl: "",
        idCardFrontUrl: "",
        idCardBackUrl: "",
        productAuthUrl: "",
        otherUrls: [],
        photo: ""
      }
    },
    beforeMount () {
      this.$validator.extend('selectedArea', selectedArea)
      this.$validator.extend('selectedOthers', selectedOthers)
      this.init()
    },
    methods: {
      async init () {
        const res = await getSupplyShopInfo(this)
        if (res.code === '0') {
          this.initData(res.data.shopInfo)
          const filter = {
            NO_SUBMIT:'未提交',AUDITING:'您的资料将在1-2个工作日内审核完毕',NO_PASS:'审核未通过',PASS:'审核通过'
          }
          this.$message.success(filter[res.data.shopInfo.auditStatus])
        } else {
          this.$message.error(res.message)
        }
      },
      async city_Change(value) {
        this.provinceCode = value[0]
        this.provinceName = CodeToText[value[0]]
        this.cityCode = value[1]
        this.cityName = CodeToText[value[1]]
        this.districtCode = value[2]
        this.districtName = CodeToText[value[2]]
        this.getLocation()
      },
      async getLocation () {
        if (this.provinceName==''||this.cityName==''||this.districtName==''||this.address=='') return
        const address = this.provinceName + this.cityName + this.districtName + this.address
        const res = await geocode(this, address)
        if (res.status === '1'){
          const geocodes = res.geocodes[0].location.split(',')
          this.longitude = geocodes[0]/1
          this.latitude = geocodes[1]/1
        } else {
          console.error(res);
        }
      },
      async doSubmit () {
        this.$validator.validateAll().then( async (result) => {
          if (!result) return
          const res = await updateSupplyShopInfo(this, this.setParmars())
          if (res.code === '0') {
            this.$message.success('上传成功')
            this.$router.push('/qualified/result')
          } else {
            this.$message.error(res.message)
          }
        })
      },
      setParmars () {
        return {
          name: this.name,
          contactName: this.contactName,
          provinceCode: this.provinceCode,
          provinceName: this.provinceName,
          cityCode: this.cityCode,
          cityName: this.cityName,
          districtCode: this.districtCode,
          districtName: this.districtName,
          longitude: this.longitude,
          latitude: this.latitude,
          address: this.address,
          businessLicenceUrl: this.businessLicenceUrl,
          idCardFrontUrl: this.idCardFrontUrl,
          idCardBackUrl: this.idCardBackUrl,
          productAuthUrl: this.productAuthUrl,
          otherUrls: this.otherUrls,
          photo: this.photo
        }
      },
      initData (shopInfo) {
        this.name = shopInfo.name
        this.contactName = shopInfo.contactName
        this.photo = shopInfo.photo
        this.provinceCode = shopInfo.auditInfo?shopInfo.auditInfo.provinceCode:''
        this.provinceName = shopInfo.auditInfo?shopInfo.auditInfo.provinceName:''
        this.cityCode = shopInfo.auditInfo?shopInfo.auditInfo.cityCode:''
        this.cityName = shopInfo.auditInfo?shopInfo.auditInfo.cityName:''
        this.districtCode = shopInfo.auditInfo?shopInfo.auditInfo.districtCode:''
        this.districtName = shopInfo.auditInfo?shopInfo.auditInfo.districtName:''
        this.longitude = shopInfo.auditInfo?shopInfo.auditInfo.longitude:''
        this.latitude = shopInfo.auditInfo?shopInfo.auditInfo.latitude:''
        this.address = shopInfo.auditInfo?shopInfo.auditInfo.address:''
        this.businessLicenceUrl = shopInfo.auditInfo?shopInfo.auditInfo.businessLicenceUrl:''
        this.idCardFrontUrl = shopInfo.auditInfo?shopInfo.auditInfo.idCardFrontUrl:''
        this.idCardBackUrl = shopInfo.auditInfo?shopInfo.auditInfo.idCardBackUrl:''
        this.productAuthUrl = shopInfo.auditInfo?shopInfo.auditInfo.productAuthUrl:''
        this.otherUrls = shopInfo.auditInfo?shopInfo.auditInfo.otherUrls:[]
        this.selectedOptions = [this.provinceCode, this.cityCode, this.districtCode]
      }
    }
  }
</script>
<style lang="scss" scoped>
  .qualified {
    width: 100%;
    min-width: 1366px;
    max-width: 1440px;
    margin: auto;
    &_box {
      width: 1319px;
      font-family: "宋体";
      margin-bottom: 58px;
    }
    h2 {
      width: 212px;
      height: 51px;
      line-height: 51px;
      text-align: right;
      padding: 0 20px;
      border-radius: 0 5px 5px 0;
      background: #333856;
      color: #fff;
    }
    ul {
      font-size: 13px
    }
    .line51 {
      line-height: 51px;
    }
    .Login_form_btn {
      display: block;
      margin-left: 580px;
      margin-top: 150px;
      margin-bottom: 27px;
      width: 283px;
      height: 57px;
      border-radius: 57px;
    }
    .save {
      font-size: 18px;
      font-family: "Microsoft YaHei";
      margin-left: 704px;
      text-align: left;
    }
    &_box1 {
      &_header {
        h2 {
          margin-top: 58px;
        }
        a {
          display: inline-block;
          margin-top: 94px;
        }
        ul {
          margin: 0 0 65px 160px;
        }
      }
      &_error {
        font-size: 12px;
        color: #f00;
        margin-top: 10px;
        line-height: 14px;
        height: 14px;
      }
      &_form {
        margin: 0 0 49px 148px;
        &_group {
          margin-bottom: 28px;
          label {
            vertical-align: middle;
            font-size: inherit;
          }
          input {
            width: 248px;
            height: 35px;
            line-height: 35px;
            border: 1px solid #dcdfe6;
            border-radius: 35px;
            padding: 0 15px;
            font-size: 14px;
            text-align: center;
            appearance: none;
            outline: none;
            box-sizing: border-box;
            display: inline-block;
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            &:focus {
              border-color: #409EFF;
            }
          }
          .ml_125 {
            margin-left: 125px;
          }
          .select_address {
            display: inline-block;
            margin-left: 170px;
            margin-right: 29px;
          }
        }
      }
      &_left{
        width:40%;float:left
      }
      &_right{
        width: 200px;
        height: 160px;
        float: left;
        background: #eee;
        margin-left:20px;
        padding: 20px 25px 0 25px;
      }
    }
    &_box2 {
      &_upload{
        margin: 63px 0 25px 148px;
        display: flex;
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          background: #fff;
          margin-bottom:10px;
          width: 178px;
          height: 150px;
          line-height: 150px;
          text-align: center;
        }
        .avatar {
          width: 150px;
          height: 150px;
          display: block;
        }
        &>div{
          margin-right:30px;
          padding:30px 50px;
          background: #eee;
        }
      }

    }
    &_box3 {
      ul {
        margin: 17px 0 0 160px;
      }
      &_fileUpload {
        min-height: 150px;
        overflow-y: auto;
        border-radius: 5px;
        margin: 55px 0 49px 148px;
        padding:50px;
        background: #eee;
        .upload{
          background: #f3f2f2;
          height:100%;
          line-height: 200px;
          padding:0px 50px;
          padding-top: 45px;
        }
      }
    }
  }
</style>

